<template>
	<view class="container">
		 <view v-if="dzList.length">
			 <view class="custom-item" v-for="(item,index) in dzList" :key="index">
					<view style="padding:15rpx 24rpx">
						<view style="color: #808080;font-size: 24rpx;">
								<view class="display-flex display-flex-justify-space-between display-flex-align-center" style="height:60rpx">
									<view class="display-flex display-flex-align-center" style="height:40rpx">
										<view style="width:66rpx">{{item.startTime}}</view>
										<view class="search-input search-input-start">
											<view class="divider-line divider-line-absolute-2"></view>
										</view>
										<view class="display-flex display-flex-align-center">
											<view class="single-line-ellipsis  font-size-30" style="color: #1b1b1b;max-width:500rpx">{{item.start}}</view>
										</view>
									</view>
								</view>
								<view class="display-flex display-flex-justify-space-between display-flex-align-center" style="height:60rpx">
									<view class="display-flex display-flex-align-center" style="height:40rpx">
										<view style="width:66rpx"></view>
										<view class="search-input search-input-end"></view>
										<view class="display-flex display-flex-align-center">
											<view class="ellipsis  font-size-30" style="color: #1b1b1b;max-width:500rpx">{{item.end}}</view>
										</view>
									</view>
								</view>
							</view>
					<view class="segmenting-line"></view>
					<view class="display-flex display-flex-align-center display-flex-justify-space-between" style="height:96rpx;padding:0 24rpx">
						<view class=" " style="font-size: 24upx;">已有{{item.joinNum}}人参与，参与人数达到50人开启预约线路</view>
						<view class="display-flex display-flex-align-center" style="margin-left:50rpx;">
						  <!-- <button bindtap="onJoinCustom" class="custom-item-button canyu-button" v-if="!item.is_join">参与</button> -->
							<button class="custom-item-button already-canyu-button" v-if="item.isJoin">已定制</button>
						   <!-- <button bindtap="onCancelCustom" class="custom-item-button quxiao-canyu-button" v-if="item.is_join">取消定制</button> -->
							<button :data-dz_id="item.dzId"  class="custom-item-button custom-share-button" data-type="custom" openType="share" style="margin-left:24rpx">分享</button>
						</view>
					</view>
				</view>
			 </view>
		 </view>
		 <view v-else  class="" >
			 <emptyPage tittle="暂无定制线路" mode="search"></emptyPage>
		 </view>

	  </view>
  
	</view>
</template>

<script>
	import {busDzList} from "@/api/bus.js" 
	import {emptyPage} from "@/components/emptyPage.vue" 
	import {mapGetters} from "vuex";
	import {toLogin} from '@/libs/login.js';
	
	export default{
		components:{
			emptyPage
		},
		data(){
			return {
				dzList:[],
				
			}
		},
	
		computed: mapGetters(['isLogin']),
		onShow() {
			if (!this.isLogin) {
				toLogin();
			}
					
		},
		onLoad(option){
		
		this.getList();
			
		},
		// onShareAppMessage: function onShareAppMessage(obj) {
		// 	if (obj.from === "button") {
		// 		var data = obj.target.dataset;
		// 		if (data.type === "custom") {
		// 			return {
		// 				title: "邀请您一起参与线路定制",
		// 				 path: 'pages/ogz-share/index?dz_id='+data.dz_id,
						
		// 			};
		// 		}
		// 	}
		// },
		// 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数，在内部会无法获得this
			onShareAppMessage(obj) {
				if (obj.from === 'button') {// 来自页面内分享按钮
					var data = obj.target.dataset;
				}
				// console.log("111", '/pages/bus/ogz_share/index?dz_id='+data.dz_id)
				return {
					title: '邀请您一起参与线路定制',
					 path: '/pages/bus/ogz_share/index?dz_id='+data.dz_id,
				}
		    },
		methods: {
			getList(){
				
				uni.showLoading({
					title:"请稍后"
				})
				busDzList().then((res) => {
					uni.hideLoading()
					this.dzList = res.data;
						
				}).catch((e) => {
					uni.hideLoading()
					return that.$util.Tips({
						title: e.msg
					}); 
				})
	
			}
			
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #f1f1f1;
	}
	.container{
/* 		height: 100%;
		 display: flex;
		overflow: hidden; */
		/* background: #fff; */
	}
	.custom-item {
	    position: relative;
	    margin: 20rpx ;
	    background-color: #fff;
	    border-radius: 6rpx;
	}
	
	.custom-item-button {
	    padding: 0 18rpx;
	    height: 52rpx;
	    line-height: 52rpx;
	    color: #fff;
	    border-radius: 6rpx;
	    text-align: center;
	    font-size: 26rpx;
	    overflow: hidden;
	    margin: 0;
	}
	
	.custom-item-button.canyu-button {
	    width: 120rpx;
	    background-color: #70bc14;
	}
	
	.custom-item-button.quxiao-canyu-button {
	    width: 160rpx;
	    background-color: #70bc14;
	}
	
	.custom-item-button.already-canyu-button {
	    width: 130rpx;
	    background-color: #e4e4e4;
	}
	
	.custom-item-button.custom-share-button {
	    width: 120rpx;
	    background-color: #26a2ff;
	}
	.search-input {
	    width: 12rpx;
	    height: 12rpx;
	    border-radius: 50%;
	    margin-right: 23rpx;
	    margin-left: 18rpx;
	}
/* 	
	.search-input.search-input-start {
	    background-color: #70bc14;
	}
	
	.search-input.search-input-end {
	    background-color: #ff5d3c;
	} */
	
	.search-input.search-input-address {
	    background-color: #b1b1b1;
	}
	
	.search-input-text {
	    max-width: 300rpx;
	}
	
	.search-input-text-nocontent {
	    color: rgb(173,173,173);
	}
	.segmenting-line {
	    height: 2rpx;
	    background-color: rgb(229,229,229);
	}
	.divider-line {
	    height: 140%;
	    width: 2rpx;
	    background-color: #d6d6d6;
	}
	
	.divider-line-absolute {
	    margin: 0 auto;
	    margin-top: 18rpx;
	}
	
	.divider-line-absolute-2 {
	    height: 200%;
	    margin: 0 auto;
	    margin-top: 22rpx;
	}
</style>
